<template>
  <div class="com-container">
    <div ref="blog_ref" class="com-chart" />
  </div>
</template>

<script>
import { viewCount7Day } from '@/api/dashBoard'
export default {
  props: {
    xName: {
      type: String,
      default: '日期'
    },
    yName: {
      type: String,
      default: '浏览量'
    },
    seriesName: {
      type: String,
      default: '浏览量曲线'
    },
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      countByMonth: [],
      commentCountByMonth: [],
      chartInstance: null,
      xAxisData: [],
      seriesData: [],
      timeList: []
    }
  },
  watch: {
  },
  mounted() {
    this.initChart()
    this.getViewsData()
    window.addEventListener('resize', this.screenAdapter)
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.blog_ref, this.theme)
      const initOption = {
        backgroundColor: '#fff',

        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'horizontal',
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: 'center',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'top'
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: '3%', // 等价于 y: '16%'
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },

        // 提示框
        tooltip: {
          show: true, // 是否显示
          trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
          axisPointer: { // 坐标轴指示器配置项。
            type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: 'auto', // 指示器的坐标轴。
            snap: true // 坐标轴指示器是否自动吸附到点上
          },
          showContent: true, // 是否显示提示框浮层，默认显示。
          renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
          backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
          borderColor: '#333', // 提示框浮层的边框颜色。
          borderWidth: 0, // 提示框浮层的边框宽。
          padding: 5, // 提示框浮层内边距，
          textStyle: { // 提示框浮层的文本样式。
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 14
          },
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
          confine: false, // 是否将 tooltip 框限制在图表的区域内。
          formatter: function(item) {
            return item[0].name + '</br> 浏览人数为：' + item[0].data
          }
        },
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        xAxis: {
          name: this.xName,
          type: 'category',
          // 设置X轴数据旋转倾斜
          axisLabel: {
            rotate: 20, // 旋转角度
            interval: 0 // 设置X轴数据间隔几个显示一个，为0表示都显示
          },
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },

        yAxis: {
          name: this.yName,
          type: 'value'
        },

        series: [
          {
            name: this.seriesName,
            data: [820, 932, 301, 1434, 1290, 1330, 1320],
            type: 'line',
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            symbol: 'none',
            // 设置折线弧度，取值：0-1之间
            smooth: 0.5,
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          }

        ]
      }
      this.chartInstance.setOption(initOption)
    },
    async getViewsData() {
      if (this.url !== '') {
        viewCount7Day(this.url).then(res => {
          let items = []
          items = res
          for (let i = 0; i < items.length; i++) {
            const ls = items[i].split(',')
            this.xAxisData.push(ls[0])
            this.seriesData.push(ls[1])
          }
          this.updateChart()
        })
      }
    },
    updateChart() {
      const dataOption = {
        xAxis: {
          name: this.xName,
          data: this.xAxisData
        },
        yAxis: {
          name: this.yName,
          type: 'value'
        },
        series: [
          {
            name: this.seriesName,
            data: this.seriesData
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter() {
      this.chartInstance.resize()
    }
  }
}
</script>

<style scoped lang="less">

    .com-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .com-chart {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    canvas {
        border-radius: 20px;
    }
</style>
